<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>待办事项</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style: none;
			}
			
			body {
				margin: 0 auto;
			}
			
			.dai {
				height: 500px;
				text-align: center;
				border: 1px solid orange;
				box-shadow: 3px 2px 40px 2px #999
			}
			
			.seach {
				position: relative;
				padding: 20px;
				background-color: wheat;
			}
			
			.container {
				width: 500px;
				margin: auto;
			}
			
			body input {
				width: 380px;
				height: 30px;
				border: 1px solid orange;
				border-radius: 20px;
				outline: none;
				padding-left: 20px;
			}
			
			body h3 {
				color: darkorange;
				font-size: 20px;
				font-family: "微软雅黑";
				padding-bottom: 10px;
			}
			
			body #add {
				position: absolute;
				top: 56px;
				right: 48px;
				height: 32px;
				padding: 0 20px;
				line-height: 30px;
				border: 1px solid orange;
				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
				outline: none;
				font-family: "微软雅黑";
				font-size: 14px;
				font-weight: 700;
				color: #666;
			}
			
			body #add:hover {
				background-color: orange;
				color: #fff;
				cursor: pointer;
			}
			
			#list li {
				overflow: hidden;
				height: 30px;
				padding: 10px;
				background-color:lightgrey;
				position: relative;
				border-bottom: 1px solid #fff;
			}
			
			#list button {
				float: right;
				line-height: 50px;
				height: 50px;
				position: absolute;
				top: 0;
				right: 0;
				background-color:orange;
				outline: none;
				border: none;
				color: #555;
				padding: 0 10px;
			}
			
			#list button:hover {
				background-color: coral;
				cursor: pointer;
				color: #fff;
			}
			
			#list span {
				float: left;
				line-height: 30px;
				height: 30px;
				color: #666;
				
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="dai">

				<div class="seach">
					<h3>待办事项</h3>
					<input type="text" id="ipt">
					<button id="add">添加</button>
				</div>
				<ul id="list">
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			var add = document.querySelector('#add')
			add.addEventListener('click', function() {
				//获取input内容
				var ipt = document.querySelector('#ipt')
				//创建li标签
				var li = document.createElement('li')
				//创建span标签
				var span = document.createElement('span')
				var span_text = document.createTextNode(ipt.value)
				span.setAttribute('contenteditable','true')
				span.style.outline = 'none'
				span.appendChild(span_text)
				//创建button标签
				var button = document.createElement('button')
				var button_text = document.createTextNode('删除')
				button.appendChild(button_text)
				button.addEventListener('click', function() {
					var list = document.querySelector('#list')
					list.removeChild(this.parentNode)
				})
				//把span和button追加到li标签
				li.appendChild(span)
				li.appendChild(button)
				//把li标签追加到ul里
				var list = document.querySelector('#list')
				list.appendChild(li)

			})
		</script>
	</body>

</html>